<template>
  <div class="app-container" id="car"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      carData: [],
      queryInfo: {
        parkname: "A",
        currPage: 0,
        pageNum: 4,
      },

      carDataB: [],
      queryInfoB: {
        parkname: "B",
        currPage: 0,
        pageNum: 4,
      },

      carDataC:[],
      queryInfoC: {
        parkname: "C",
        currPage: 0,
        pageNum: 4,
      },

      carDataD:[],
      queryInfoD: {
        parkname: "D",
        currPage: 0,
        pageNum: 4,
      },
// ---------------------------------------------
      carDataA1: [],
      queryInfoA1: {
        parkname: "A",
        currPage: 0,
        pageNum: 4,
        parkstatus: 1,
      },

      carDataB1: [],
      queryInfoB1: {
        parkname: "B",
        currPage: 0,
        pageNum: 4,
        parkstatus: 1,
      },

      carDataC1: [],
      queryInfoC1: {
        parkname: "C",
        currPage: 0,
        pageNum: 4,
        parkstatus: 1,
      },

      carDataD1: [],
      queryInfoD1: {
        parkname: "D",
        currPage: 0,
        pageNum: 4,
        parkstatus: 1,
      },
    };
  },
  mounted() {
    this.getEchartsData();
  },
  methods: {
    async getEchartsData() {
      // A
      let res = await this.$axios({
        url: "/parking/getParkData",
        methods: "get",
        params: this.queryInfo,
      });
      this.carData = res.data.total;

      //A1
      let resA1 = await this.$axios({
        url: "/parking/getParkData",
        methods: "get",
        params: this.queryInfoA1,
      });
      this.carDataA1 = resA1.data.total;

      //B
      let resB = await this.$axios({
        url: "/parking/getParkData",
        methods: "get",
        params: this.queryInfoB,
      });
      this.carDataB = resB.data.total;

      //B1
      let resB1 = await this.$axios({
        url: "/parking/getParkData",
        methods: "get",
        params: this.queryInfoB1,
      });
      this.carDataB1 = resB1.data.total;

      //C
      let resC = await this.$axios({
        url: "/parking/getParkData",
        methods: "get",
        params: this.queryInfoC,
      });
      this.carDataC = resC.data.total;

      //C1
      let resC1 = await this.$axios({
        url: "/parking/getParkData",
        methods: "get",
        params: this.queryInfoC1,
      });
      this.carDataC1 = resC1.data.total;

      //D
      let resD = await this.$axios({
        url: "/parking/getParkData",
        methods: "get",
        params: this.queryInfoD,
      });
      this.carDataD = resD.data.total;

      //C1
      let resD1 = await this.$axios({
        url: "/parking/getParkData",
        methods: "get",
        params: this.queryInfoD1,
      });
      this.carDataD1 = resD1.data.total;
      this.echartsInit();
    },
    echartsInit() {
      echarts.init(document.getElementById("car")).setOption({
        color:['#5470C6','#91CC75','#DDB7FA'],
        title: {
          text: "车位数/已分配量/已缴费",
          left: "left",
          textStyle: {
            fontSize: 14,
          },
        },
        legend: {
          // 图例
          show: true, // 显示图例
          orient: "horizontal", // 图例排列方式
          data: ["车位数", "已分配量", "已缴费"],
          left: "50%",
          top: "3%",
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
          backgroundColor: "rgba(32,33,36,7)",
          borderWidth: 1,
        },
        dataset: {
          source: [
            ["product", "车位数", "已分配量", "已缴费"],
            ["A区车位", this.carData, this.carDataA1, 0],
            ["B区车位", this.carDataB, this.carDataB1, 0],
            ["C区车位", this.carDataC, this.carDataC1, 0],
            ["D区车位", this.carDataD, this.carDataD1, 0],
          ],
        },
        xAxis: [
          {
            type: "category",
          },
        ],
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
        label: {
          show: true,
          position: "top",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container::v-deep {
  width: 100%;
  height: 100%;
}
</style>
